// 博客页面样式

// 主内容区样式
main {
  width: 100%
  margin: 0 auto
  padding: 0 1rem
}

// 三栏布局
.main-content {
  display: flex
  min-height: 100vh
  gap: 5rem
  position: relative
  margin: 1rem auto
}

// 文章内容区
.article-content {
  flex: 1
  min-width: 0 // 解决Flexbox内容溢出问题
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.753)
  background-color: rgba(0, 0, 0, 0.1)
  border-radius: 12px
  animation: fadeInUp 0.8s ease-in-out forwards
  opacity: 0
}

// 侧边栏共同样式
.left-sidebar,
.right-sidebar {
  flex: 0.3
  min-width: 0 // 防止溢出
}


// 左侧边栏特定动画
.left-sidebar {
  animation: fadeInLeft 0.8s ease-in-out forwards
  opacity: 0
  animation-delay: 0.2s
}

// 右侧边栏特定动画
.right-sidebar {
  animation: fadeInRight 0.8s ease-in-out forwards
  opacity: 0
  animation-delay: 0.2s
}

// 头图样式
.hero-image {
  width: 100%
  margin-bottom: 1rem
  animation: fadeIn 1s ease-in-out forwards
  opacity: 0
  
  img {
    display: block
    margin: 0 auto
    border-radius: 12px
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2)
    max-height: 400px
    object-fit: cover
  }
}

// 文章内容区
.prose {
  padding: 2rem
  border-radius: 12px
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)
  
  // 文章排版增强
  p {
    line-height: 1.7
    margin-bottom: 1.5rem
  }
  
  h2, h3, h4 {
    margin-top: 2.5rem
    margin-bottom: 1.2rem
    position: relative
  }
  
  h2 {
    font-size: 1.8rem
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    padding-bottom: 0.5rem
  }
  
  h3 {
    font-size: 1.5rem
  }
  
  h4 {
    font-size: 1.3rem
  }
  
  ul, ol {
    padding-left: 1.5rem
    margin-bottom: 1.5rem
  }
  
  li {
    margin-bottom: 0.5rem
  }
  
  blockquote {
    border-left: 4px solid rgba(1, 162, 190, 0.8)
    padding-left: 1rem
    margin-left: 0
    color: rgba(255, 255, 255, 0.8)
    font-style: italic
    margin-bottom: 1.5rem
  }
  
  a {
    color: rgba(41, 182, 246, 1)
    text-decoration: none
    transition: all 0.3s ease
    position: relative
    
    &:not(:has(img)) {
      &:after {
        content: " 🔗"
        font-size: 0.85em
        opacity: 0.7
      }
    }
    
    &:hover {
      color: rgba(3, 218, 198, 1)
      text-shadow: 0 0 8px rgba(3, 218, 198, 0.4)
    }
    
    &:active {
      color: rgba(0, 229, 255, 1)
    }
  }

  
  img {
    max-width: 100%
    height: auto
    border-radius: 8px
    display: block
    margin: 2rem auto
  }

  table {
    width: 100%
    border-collapse: collapse
    margin: 2rem 0
    overflow-x: auto
    display: block
    
    th, td {
      border: 1px solid rgba(255, 255, 255, 0.2)
      padding: 0.75rem
      text-align: left
    }
    
    th {
      background-color: rgba(255, 255, 255, 0.1)
    }
    
    tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.05)
    }
  }
  code {
    color:rgba(255, 121, 198, .95);
  }
  strong {
    color:rgba(255, 217, 102, .95);
  }
  del {
    text-decoration: line-through
    color: rgba(255, 99, 132, 0.85)
    background-color: rgba(255, 99, 132, 0.1)
    padding: 0 4px
    border-radius: 3px
    position: relative
  }

  u {
    text-decoration: none
    position: relative
    color: rgba(102, 217, 255, 0.95)
    
    &::after {
      content: ''
      position: absolute
      left: 0
      bottom: -2px
      width: 100%
      height: 2px
      background: linear-gradient(90deg, rgba(102, 217, 255, 0.7), rgba(3, 218, 198, 0.7))
      border-radius: 1px
      box-shadow: 0 0 4px rgba(3, 218, 198, 0.4)
    }
  }

  em {
    font-style: italic
    color: rgba(142, 220, 230, 0.95)
    position: relative
    padding: 0 2px
  }
}

// 标题样式  
.title {
  margin-bottom: 2rem
  text-align: center
  line-height: 1.3
  animation: fadeInUp 0.8s ease-in-out forwards
  opacity: 0
  animation-delay: 0.1s
  
  h1 {
    margin: 0 0 1rem 0
    font-size: 2.5rem
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(1, 162, 190, 0.9))
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
    background-clip: text
  }
}

// 日期样式
.date {
  display: flex
  justify-content: center
  gap: 2rem
  flex-wrap: wrap
  margin: 1rem 0
  color: rgba(255, 255, 255, 0.7)
  font-size: 0.9rem
  animation: fadeInUp 0.8s ease-in-out forwards
  opacity: 0
  animation-delay: 0.2s
}

// 更新日期样式  
.last-updated-on {
  font-style: italic
}

// 代码块样式增强
.expressive-code {
  margin: 2rem 0
  
  .frame {
    border-radius: 8px
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .prose {
    padding: 1.5rem
  }
  
  .title h1 {
    font-size: 2.2rem
  }
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column
    gap: 2rem
  }
  
  .prose {
    padding: 1.2rem
  }
  
  .title h1 {
    font-size: 2rem
  }
  
  .date {
    flex-direction: column
    gap: 0.5rem
    align-items: center
  }
}

@media (max-width: 480px) {
  main {
    padding: 0 0.5rem
  }
  
  .prose {
    padding: 1rem
  }
  
  .title h1 {
    font-size: 1.8rem
  }
}